<template>
  <view v-if="isShow">
    <view class="zhezhao" v-if="showPop"></view>
    <view class="box" v-if="showPop" @click="showButton">
      <view class="top-box">
        <image :src="logoIcon"></image>
      </view>
      <view class="content-text">
        <view>下载app即送
          <text>319元</text>
          羊奶粉代金券及
          <text>100积分</text>
        </view>
        <view>还有更多福利活动和内容哦</view>
        <view>快快下载领福利吧！</view>
        <view class="button">立即下载领取福利</view>
      </view>
      <view class="clone" @click.stop="clone">
        <image src="https://wechat-pictures-1301970825.file.myqcloud.com/shop/regist/icon_cloes.png"></image>
      </view>
    </view>
    <view v-if="!showPop" class="appIcon" :style="style" @click="showButton">
      <image :src="isClone?appIcon2:appIcon" :class="isClone?'toDApp':''"></image>
      <!--      <text>下载app</text>-->
      <view class="clone" @click.stop="isClone=true" v-if="!isClone">
        <image src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/clone.png"></image>
      </view>
    </view>
    <button-contact ref="buttonContact"></button-contact>
  </view>
</template>
<script>
import buttonContact from "@/components/buttonContact/buttonContact.vue";

export default {
  name: "appDrainage",
  components: {
    buttonContact
  },
  data() {
    return {
      appIcon: 'https://wechat-pictures-1301970825.file.myqcloud.com/shop/regist/appIcon2.png',
      appIcon2: 'https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/appIcon3.png',
      logoIcon: 'https://wechat-pictures-1301970825.file.myqcloud.com/shop/regist/logo.png',
      showPop: false,
      isShow: false,
      style: '',
      isClone: false
    }
  },
  created() {
    this.getAppTaskConfig()
    if (uni.getStorageSync('isAppDrainage')) {
      let time = new Date().getTime() - uni.getStorageSync('isAppDrainageTime')
      if (time < 1000 * 60 * 60 * 24) {
        this.isClone = true
      }
    }
    setTimeout(() => {
      this.isClone = true
    }, 1000 * 60)
  },
  watch: {
    // 检测isClone
    isClone(newValue, oldValue) {
      if (newValue) {
        uni.setStorageSync('isAppDrainage', newValue)
        uni.setStorageSync('isAppDrainageTime', new Date().getTime())
      }
    }
  },
  methods: {
    async getAppTaskConfig() {
      let data = await this.$javaCircle.doRequest("get", 'vs/newbie/popup', '', '');
      let {isBouy, isPopup} = data.data.data;
      if (isBouy !== 1 || isPopup !== 1) {
        this.isShow = true;
      }
      if (isPopup === 0) {
        this.showPop = true;
      }
    },
    setStyle(bottom) {
      this.style = 'bottom:' + bottom + 'rpx'
    },
    showButton() {
      this.$refs.buttonContact.show = true
    },
    clone() {
      this.showPop = false;
      this.$emit('setAppIconStyle')
    }
  }
}
</script>

<style scoped lang="scss">
.zhezhao {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, .7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

.box {
  width: 580upx;
  height: 640upx;
  background-color: #fff;
  border-radius: 39upx;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 13;

  .top-box {
    width: 100%;
    height: 210upx;
    position: relative;
    background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/shop/regist/bj.png");
    background-size: 100% 100%;

    image {
      width: 524upx;
      height: 262upx;
      position: absolute;
      left: 50%;
      bottom: 30upx;
      transform: translate(-50%, 0);
    }
  }

  .content-text {
    width: 100%;
    box-sizing: border-box;
    padding: 16upx 26upx 40upx 26upx;

    view:nth-child(1) {
      font-size: 42upx;
      color: #666666;
      line-height: 62upx;
      text-align: center;
    }

    view:nth-child(2) {
      font-size: 42upx;
      color: #666666;
      line-height: 62upx;
      text-align: center;
    }

    view:nth-child(3) {
      font-size: 42upx;
      color: #333333;
      line-height: 62upx;
      text-align: center;
      font-weight: 700;
    }

    text {
      color: #F33F02;
    }

    .button {
      width: 100%;
      height: 98upx;
      border-radius: 49upx;
      background-color: #18AA59;
      line-height: 98upx;
      text-align: center;
      color: #fff;
      font-size: 42upx;
      font-weight: 600;
      margin-top: 25upx;
    }
  }
}

.appIcon {
  width: 241upx;
  height: 251upx;
  position: fixed;
  bottom: 627upx;
  left: 24upx;
  z-index: 12;
  transition: all .4s linear;
  display: flex;
  align-items: center;

  image {
    width: 100%;
    height: 100%;
    transition: all .3s linear;
  }

  .toDApp {
    width: 233upx;
    height: 96upx;
  }

  .clone {
    width: 44upx;
    height: 44upx;
    position: absolute;
    top: -50upx;
    left: 230upx !important;

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.clone {
  width: 80upx;
  height: 80upx;
  position: absolute;
  left: 50%;
  bottom: -150upx;
  transform: translate(-50%, 0);
}
</style>
